import React, { Component } from 'react'
import './index.css'
/**
 * 对于关系明确的父子组件来说，我们可以比较简单的从组件的嵌套关系来判断组件间的父子关系
 * 但是有时候我们可能并不能确定父组件中的子组件具体是哪一个，而是等到具体调用的时候才知道
 * 在Vue中，这种问题的解决方案被称为插槽技术
 * 在React中，我们通常使用children props以及render props属性来解决这类问题
 * 其中，children props虽然可以完成组件的传递，但是却不能实现父子组件的数据传递
 * 而render props则可以解决这类问题
 */
export default class Parent extends Component {
    render() {
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                {/* 方式2（在标签内写组件标签）：一般来说，我们的props属性命名为 render */}
                <A render={name=><B name={name} />}>
                    {/* 方式1（在标签体内写组件标签）：A组件的标签体中使用组件标签后，需要在A组件中对应是导出props属性 */}
                    {/* <B/> */}
                </A>
            </div>
        )
    }
}

class A extends Component {

    state = {name:'小明'}

    render() {
        const {name} = this.state;
        return (
            <div className="child">
                <h3>我是A组件</h3>
                {/* {this.props.children} */}
                {this.props.render(name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className="grand">
                <h3>我是B组件</h3>
        <h4>接收到的父组件参数是: {this.props.name}</h4>
            </div>
        )
    }
}